
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Popover</title>
<link rel=stylesheet type="text/css" href="stylish-portfolio.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        //placement : 'right'
    });
});
</script>
<style type="text/css">
	.bs-example{
    	margin: 500px 50px;
    }
</style>
</head>
<body background="img/fon.jpg">
<div class="">

<div class="row">
<div class="col-sm-6"><button type="button" class="btn btn-default" data-toggle="popover"  title="Présentation" data-placement="right" data-content="Début : janvier 2012. 
Localisation : Camps en général
Budget : 684 000 €
Financé par : Le Haut-commissariat aux réfugiés et des donateurs privés de CARE
Bénéficiaires : 18 800 réfugiés et 800 personnes issues de la population hôte" onClick="clickMonBouton();"><img src="img/BOUTON2.jpg"></button></div>

<div class="col-sm-4  col-sm-offset-2"><button type="button" class="btn btn-default" data-toggle="popover"  title="Contexte" data-placement="left" data-content="L'insécurité alimentaire a fortement augmenté due à une période de pluie très courte combinée à la flambée des prix de la nourriture et du carburant. La fluctuation des pluies et la sécheresse sont des événements courants à Djibouti mais la sécheresse actuelle dépasse de loin les niveaux habituels et affecte gravement la population. " onClick="clickMonBouton();"><img src="img/BOUTON3.jpg"></button></div> 
</div>

<div class="row">
<div class="col-sm-6"><button type="button" class="btn btn-default" data-toggle="popover"  title="Objectif" data-placement="right" data-content="Objectif principal : Prévenir et réduire la morbidité et la mortalité des populations et améliorer la qualité de vie des réfugiés et des populations hôtes en leur permettant d'accéder à des soins de qualité.
Objectif spécifique : Assurer un accès à l'eau et à l'assainissement et sensibiliser les populations aux bonnes pratiques d'hygiène.
" onClick="clickMonBouton();"><img src="img/BOUTON4.jpg"></button></div> 

<div class="col-sm-4 col-sm-offset-2"><button type="button" class="btn btn-default" data-toggle="popover"  title="Activités" data-placement="left" data-content="Centre de santé :

    Faciliter l'ouverture du centre de santé du camp.
    Améliorer la qualité des services dans le camp.
    Gérer le centre de santé du camp de réfugiés.
    Former du personnel de santé.
    Réorganiser le centre de santé avec l'ajout d'un service sur la tuberculose et de consultations psychosociales.
    Acheter et stocker les équipements médicaux manquants.
    Mettre en place des cliniques mobiles pour les nouveaux arrivants au centre de transit de Loyada (dépistage et assistance).
    Prévenir les maladies évitables par la vaccination.
Eau et assainissement :

    Organiser des sessions de promotion de l'hygiène et distribuer des kits sanitaires.
    Construire de latrines familiales et des fosses à ordures.
    Organiser des campagnes de nettoyage et distribuer des kits de nettoyage.
" onClick="clickMonBouton();"><img src="img/BOUTON1.jpg"></button></div>  
</div>


</div>
</body>
</html>                                		